import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

// Offstage的作用很简单，通过一个参数，来控制child是否显示，日常使用中也算是比较常用的控件
class OffstageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("Offstage"),
          leading: new BackButton(),
        ),
        body: new OffstageContent());
  }
}

class OffstageContent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new OffstageContentState();
}

class OffstageContentState extends State<OffstageContent> {
  late bool offstage;

  @override
  void initState() {
    super.initState();
    offstage = false;
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new Offstage(
          /*  当offstage为true，当前控件不会被绘制在屏幕上，不会响应点击事件，也不会占用空间；
           *  当offstage为false，当前控件则跟平常用的控件一样渲染绘制；
           *  另外，当Offstage不可见的时候，如果child有动画，应该手动停掉，Offstage并不会停掉动画
           */
          offstage: offstage,
          child: Container(
            color: Colors.blue,
            height: 100,
          ),
        ),
        new CupertinoButton(
          child: new Text('点击切换显示'),
          onPressed: () {
            setState(() {
              offstage = !offstage;
            });
          },
        ),
      ],
    );
  }
}
